import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
// import { GUI } from 'three/examples/jsm/libs/'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader';

function Test(){
    let containerRef = useRef();
    useEffect(()=>{
        const params = {
            envMap: 'PNG',
            roughness: 0.0,
            metalness: 0.1,
            exposure: 1.0,
            debug: false,
        };

        let container, stats;
        let camera, scene, renderer, controls;
        let torusMesh, planeMesh;
        let pngCubeRenderTarget, exrCubeRenderTarget;
        let pngBackground, exrBackground;

        init();
        animate();

        function init() {
            
            let container = containerRef.current;

            camera = new THREE.PerspectiveCamera( 40, container.offsetWidth / container.offsetHeight, 1, 1000 );
            camera.position.set( 0, 0, 120 );

            scene = new THREE.Scene();

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( container.offsetWidth, container.offsetHeight );

            container.appendChild( renderer.domElement );

            renderer.toneMapping = THREE.ACESFilmicToneMapping;

            //

            let geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
            let material = new THREE.MeshStandardMaterial( {
                color:'#1890ff',
                metalness: params.metalness,
                roughness: params.roughness,
                envMapIntensity: 1.0
            } );

            torusMesh = new THREE.Mesh( geometry, material );
            scene.add( torusMesh );

            geometry = new THREE.PlaneGeometry( 200, 200 );
            material = new THREE.MeshBasicMaterial();

            planeMesh = new THREE.Mesh( geometry, material );
            planeMesh.position.y = - 50;
            planeMesh.rotation.x = - Math.PI * 0.5;
            scene.add( planeMesh );

            THREE.DefaultLoadingManager.onLoad = function ( ) {

                pmremGenerator.dispose();

            };

            // new EXRLoader().load( 'textures/piz_compressed.exr', function ( texture ) {

            //     texture.mapping = THREE.EquirectangularReflectionMapping;

            //     exrCubeRenderTarget = pmremGenerator.fromEquirectangular( texture );
            //     exrBackground = texture;

            // } );

            new THREE.TextureLoader().load( '/models/equirectangular.png', function ( texture ) {

                texture.mapping = THREE.EquirectangularReflectionMapping;
                texture.colorSpace = THREE.SRGBColorSpace;
                pngCubeRenderTarget = pmremGenerator.fromEquirectangular( texture );
                pngBackground = texture;

            } );

            const pmremGenerator = new THREE.PMREMGenerator( renderer );
            pmremGenerator.compileEquirectangularShader();


            controls = new OrbitControls( camera, renderer.domElement );
            controls.minDistance = 50;
            controls.maxDistance = 300;
            console.log(scene);
            window.addEventListener( 'resize', onWindowResize );

            // const gui = new GUI();

            // gui.add( params, 'envMap', [ 'EXR', 'PNG' ] );
            // gui.add( params, 'roughness', 0, 1, 0.01 );
            // gui.add( params, 'metalness', 0, 1, 0.01 );
            // gui.add( params, 'exposure', 0, 2, 0.01 );
            // gui.add( params, 'debug' );
            // gui.open();

        }

        function onWindowResize() {

            const width = window.innerWidth;
            const height = window.innerHeight;

            camera.aspect = width / height;
            camera.updateProjectionMatrix();

            renderer.setSize( width, height );

        }

        function animate() {

            requestAnimationFrame( animate );

            render();

        }

        function render() {

            torusMesh.material.roughness = params.roughness;
            torusMesh.material.metalness = params.metalness;

            let newEnvMap = torusMesh.material.envMap;
            let background = scene.background;

            switch ( params.envMap ) {

                case 'EXR':
                    newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
                    background = exrBackground;
                    break;
                case 'PNG':
                    newEnvMap = pngCubeRenderTarget ? pngCubeRenderTarget.texture : null;
                    background = pngBackground;
                    break;

            }

            if ( newEnvMap !== torusMesh.material.envMap ) {

                torusMesh.material.envMap = newEnvMap;
                torusMesh.material.needsUpdate = true;

                planeMesh.material.map = newEnvMap;
                planeMesh.material.needsUpdate = true;

            }

            torusMesh.rotation.y += 0.005;
            planeMesh.visible = params.debug;

            // scene.background = background;
            renderer.toneMappingExposure = params.exposure;

            renderer.render( scene, camera );

        }
    },[])
    return <div className='container' ref={containerRef} style={{ height:'100%' }}></div>
}

export default Test;